<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>订单信息</title>
    <link rel="stylesheet" href="css/weui.min.css" />
    <link rel="stylesheet" href="fonts/iconfont.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/jquery-2.2.3.min.js"></script>
    <script src="js/weui.min.js"></script>

</head>
<style>
    .adress {
        width: 375px;
        height: 70px;
        margin-top: 10px;
        background: rgba(255, 255, 255, 1);
        opacity: 1;
    }

    .adress-name-phone {
        width: 112px;
        height: 18px;
        position: relative;
        top: -13px;
        left: 35px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 18px;
        color: rgba(102, 102, 102, 1);
        opacity: 1;
    }

    .adress-content {
        width: 276px;
        height: 18px;
        position: relative;
        top: -10px;
        left: 35px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 18px;
        color: rgba(102, 102, 102, 1);
        opacity: 1;
    }

    .adress img {
        width: 15px;
        height: 19px;
        position: relative;
        top: 25px;
        left: 12px;
        opacity: 1;
    }

    .logistics-information {
        width: 375px;
        height: 82px;
        margin-top: 15px;
        background: rgba(255, 255, 255, 1);
        opacity: 1;
    }

    .logistics-information .title {
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #EEEEEE;
        padding: 0px 10px 0px 11px;
        color: #333333;
        font-size: 14px;
        font-weight: bold;
    }

    .logistics-information .order-number {
        width: 203px;
        height: 40px;
        line-height: 40px !important;
        font-size: 14px;
        font-family: PingFang SC;
        padding: 0px 10px 0px 11px;
        font-weight: 400;
        line-height: 20px;
        color: rgba(112, 112, 112, 1);
        opacity: 1;
    }

    .good-item-title {
        height: 20px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        line-height: 20px;
        color: rgba(51, 51, 51, 1);
        opacity: 1;
    }

    .good-item {
        width: 375px;
        height: 150px;
    }

    /* 订单信息 */
    .order-msg {
        width: 375px;
        height: 186px;
        margin-top: 15px;
        background: rgba(255, 255, 255, 1);
    }

    .order-msg .content {
        height: 100px;
        border-bottom: 1px solid #EEEEEE;
    }

    .order-msg .total-commodity {
        height: 20px;
        margin-top: 12px;
    }

    /* 底部按钮部分 */
    .footer-btn {
        width: 100%;
        height: 48px;
        position: fixed;
        left: 0px;
        bottom: 0px;
        background: rgba(255, 255, 255, 1);
    }

    .good-item-foot-btn {
        width: 90px;
        height: 24px;
        line-height: 24px;
        background: rgba(0, 207, 196, 1);
        text-align: center;
        color: #fff;
        font-size: 14px;
        border-radius: 4px;
        border: none;
        float: right;
        margin-top: 13px;
        margin-right: 10px;
    }
</style>

<body ontouchstart>

    <div class="weui-content">
        <!-- <div class="go-back">
            <a href="home.html"><img src='./images/back.png' /><span>返回</span></a>
        </div> -->
        <div class="adress">
            <img src="./images/adress-icon.png" alt="">
            <div class="adress-name-phone">小明 18***277426</div>
            <div class="adress-content">四川省成都市武侯区玉林南路20号3栋6单元409</div>
        </div>
        <div class="logistics-information">
            <div class="title">物流信息</div>
            <div class="order-number">顺丰快递 单号：123123123</div>
        </div>
        <!-- 订单产品 -->
        <div class="good-item">
            <div class="good-item-title">
                订单产品
            </div>
            <div class="good-item-content">
                <img src="./images/food.png" alt="">
                <span class="good-item-content-right">
                    <span class="good-item-name">麻辣小龙虾麻辣小龙虾麻辣小龙虾麻辣小龙虾</span>
                    <span class="good-item-price">25元</span>
                </span>
            </div>
        </div>
        <!-- 订单信息 -->
        <div class="order-msg">
            <div class="logistics-information">
                <div class="title">订单信息</div>
                <div class="content">
                    <div class="total-commodity">
                        <span style="float: left; font-size:14px;color:rgba(159,159,159,1); padding-left: 11px;">商品总额</span>
                        <span style="float: right; font-size:14px;color:rgba(159,159,159,1); padding-right: 10px; padding-bottom: 10px">¥25</span>
                    </div>
                    <div class="total-commodity">
                        <span style="float: left; font-size:14px;color:rgba(159,159,159,1); padding-left: 11px;">运费</span>
                        <span style="float: right; font-size:14px;color:rgba(159,159,159,1); padding-right: 10px; padding-bottom: 10px">¥5.00</span>
                    </div>
                    <div class="total-commodity" style="padding-bottom:10px;">
                        <span style="float: left; font-size:14px;color:rgba(159,159,159,1); padding-left: 11px;">交易时间</span>
                        <span style="float: right; font-size:14px;color:rgba(159,159,159,1); padding-right: 10px;">2018-8-22
                            14:13</span>
                    </div>
                </div>
                <div>
                    <div style="width:130px; height:20px; padding-top: 7px; float: right; font-size: 14px;">
                        <span style="color: #333; font-weight: Bold;">订单总计：</span>
                        <span style="color:#F44831;"> ¥30.00</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部确认按钮 -->
        <div class="footer-btn">
            <button class="good-item-foot-btn">确认收货</button>
        </div>
    </div>
</body>

</html>